// 定义 UI 组件

import { useSelector, useDispatch } from 'react-redux';

// 导入 action creator
import {
  decrement,
  increment,
  selectCount,
} from './counterSlice';

// 导入样式文件
import styles from './Counter.module.css';

export default function Counter() {
  // 获得 store 中存储的与计数器有关的数值
  const count = useSelector(selectCount);
  // 通过 useDispatch 获取 store 中的 dispatch 函数
  const dispatch = useDispatch();
  // 返回 JSX
  return (
    <div>
      <div className={styles.row}>
        <button
          className={styles.button}
          onClick={() => dispatch(decrement())}
        >
          -
        </button>
        {/* 显示在 store 中与计数器有关的数据 */}
        <span className={styles.value}>{count}</span>
        <button
          className={styles.button}
          onClick={() => dispatch(increment())}
        >
          +
        </button>
      </div>
    </div>
  );
}
